<html>
	<head>
		<link rel='stylesheet' href='im.css'>

		
		
		<style type="text/css">
			/* pushes the page to the full capacity of the viewing area */
			html {height:100%;}
			body {height:100%; margin:0; padding:0;}
			
			/* prepares the background image to full capacity of the viewing area */
			#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
			
			/* places the content ontop of the background image */
			#content {position:relative; z-index:1;}
		</style>

		<!--[if IE 6]>
		<style type="text/css">
		/* some css fixes for IE browsers */
			html {overflow-y:hidden;}
			body {overflow-y:auto;}
			#bg {position:absolute; z-index:-1;}
			#content {position:static;}
		</style>
		<![endif]-->
		
		
		<script src="jquery-1.3.1.min.js"></script>
		<script src="jquery-ui-1.7.custom.min.js"></script>
		<script src="jquery.scrollTo-min.js"></script>
		<script src="im.js"></script>
	
	</head>
	<body>
	
		<div id="bg"><img src="images/pimpbg.png" width="100%" height="100%" alt=""></div>
		<div id="content">

	
	
	<%
	try
	{
		if ((Boolean)session.getAttribute("Logged") == false || session.getAttribute("Logged") == null)
		{%>
		
			<jsp:forward page="index.jsp">
				<jsp:param name="error" value="Invalid Session, Please Log In" />
			</jsp:forward>

		<%
		session.invalidate();
		}
	}
	catch (Exception e)
	{%>
		<jsp:forward page="index.jsp">
			<jsp:param name="error" value="Invalid Session, Please Log In" />
		</jsp:forward>
	<%}
	%>
	
	
		<div id="container" style="height:100%; width:100%">

			<!--
			<button onclick="updateBuddyList()" >Update Buddy List</button>
			-->
			
			
			
		<script type="text/javascript" charset="utf-8">
		function logout() {
			//alert("LOGOUT");
			
			<% 
				Boolean logged = false;
				session.setAttribute( "Logged", logged );
				
				session.invalidate(); 
			%>

			// redirect to index.jsp
			location.href="index.jsp";


		}
		
		$(document).ready(function(){
		
			$("input:radio").click(function(){
				var statusstring = $("input:radio:checked").eq(0).attr('value');
				sendStatus(statusstring);
			});
		
			$(window).unload( function () { sendStatus(0); } );

		});
		</script>
		
			<button onclick="logout()">Logout</button>
			
			<div id="status">
			<form  name="myform" action="">
				<input type="radio" name="group1" value="1" checked> <font color="white">Online</font><br>
				<input type="radio" name="group1" value="2"> <font color="white">Away</font><br>
			</form>
			</div>
			<!-- The buddy list window -->
			<div id="buddyList">
				<div class="buddyHandle" style="height: 25px;">
					<span class="buddyTitle" 
						style="font-family: comic Sans MS, san-serif; 
								font-size: 16px; 
								font-weight: bolder; 
								padding-bottom: 5px; 
								margin-bottom: 5px;
								
								">My Buddies</span>
				</div>
				<div id="buddies" style="background-color: white;">
				<!-- <div id="buddies"> -->
				</div>
				<div id="buddyListButtons">
					<button id="addBuddyBtn" class="button" >Add</button>
					<button id="delBuddyBtn" class="button" >Delete</button>
				</div>
			</div>
			
			<!-- The template for a new buddy chat window. This div is never actually shown, it is just used to clone a new window in javascript -->
			<div id="buddyTemplate">
				<div id="budId" class="buddyWindow closeable">
					<div class="buddyHandle">
						<span class="buddyTitle"></span>
						<img class="closeButton" src="close-button.jpg"/>
					</div>
					<div class="budChat" wrap="virtual"></div>
					<textarea class="chatEntry" wrap="virtual"></textarea>
				</div>
			</div>
			
			

		</div>
		
		<!-- for username things -->
		<div id="data"></div>
		
		
		
		<!-- end of content tag for background --></div>
	</body>

</html>